<template>
   <div class="web-info">
      <div class="title">惠农购-网站配置信息</div>
      <el-form ref="form" :model="form" label-width="80px">
         <el-form-item label="网站标题">
            <el-input v-model="form.title"></el-input>
         </el-form-item>
         <el-form-item label="网站内容">
            <el-input v-model="form.content"></el-input>
         </el-form-item>
         <el-form-item label="版权信息">
            <el-input v-model="form.copy"></el-input>
         </el-form-item>
         <el-form-item label="备案信息">
            <el-input type="textarea" v-model="form.beiAn"></el-input>
         </el-form-item>
         <el-form-item>
            <el-button type="primary">保存</el-button>
         </el-form-item>
      </el-form>
   </div>
</template>

<script>
import { getWebInfoApi } from "@/api/admin"

export default {
   data() {
      return {
         form: {
            title: "",
            content: "",
            copy: "",
            beiAn: ""
         }
      }
   },
   created() {
      this.__getWebInfo()
   },
   methods: {
      async __getWebInfo() {
         const res = await getWebInfoApi();
         if (!res) return;
         const data = res.data;
         // 将数据转换为 form 格式
         data.forEach(item => {
            if (this.form.hasOwnProperty(item.key)) {
               this.form[item.key] = item.value;
            }
         });
         console.log("data:  ", this.form);
      }
   }
}
</script>

<style lang="less" scoped>
.web-info {
   width: 60%;
   margin: 0 auto;
}

.title {
   color: #409eff;
   font-size: 20px;
   font-weight: 700;
   text-align: center;
   margin-bottom: 40px;
}
</style>